<template>
    <div class="container">
        <div class="row pt-3">
            <div class="col-12">
                <div id="carouselExampleDark" class="carousel carousel slide w-100" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
                            aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
                            aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
                            aria-label="Slide 3"></button>
                    </div>
                    <div class="carousel-inner">
                        <div class="carousel-item active" data-bs-interval="10000">
                            <img src="https://img.freepik.com/free-psd/realistic-multimedia-player-mockup_439185-10570.jpg?w=1800&t=st=1665670208~exp=1665670808~hmac=d836d99a917a300cd3cd5d49c9ce6df5d986f18c6d07a9aed7b9c5a8f2bd9014"
                                class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block ti-drag-drop ">
                                <div class="fs-1 fw-bold">freepik</div>
                                <p class="">Freepik是国外的一个图形设计资源网站。网站集合图片、向量图、矢量图、插图、PSD等上亿元素，并且访问速度非常快。国内用户可以直接上网。
                                </p>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="fs-4  mt-3 d-flex"><i class="bi bi-cursor text-yellow me-2"></i>图片素材库</div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-3  " v-for="item in data">
                <a class="ms-3 " :href="item.url" target="_blank">
                    <div class="eshadow  p-3 d-flex align-items-center">
                        <img class="rounded" height="40" width="40" :src="item.ico" alt="">
                        <div class="ms-3">
                            <div class="">
                                {{ item.name }}
                            </div>
                            <div class=" d-flex  text-xs text-black-50 ">
                                <div class=" mx-1 py-1 fs-6  rounded-2 text-nowrap " v-for="(el, index) in item.lable"
                                    :key="index">
                                    {{ el }}
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import img1 from '~src/assets/images/faico/unsplash.ico'
import img2 from '~src/assets/images/faico/freepik.ico'
import img3 from '~src/assets/images/faico/piqsels.ico'
import img4 from '~src/assets/images/faico/px.png'
import img5 from '~src/assets/images/faico/hippopx.ico'
import img6 from '~src/assets/images/faico/pexels.ico'
import img7 from '~src/assets/images/faico/Photock.png'
import img8 from '~src/assets/images/faico/kaboompics.png'
import img9 from '~src/assets/images/faico/freeimages.png'
import img10 from '~src/assets/images/faico/xdsucai.png'
const data = [
    {
        url: 'https://www.freepik.com/',
        name: 'freepick',
        ico: img2,
        lable: ['3D素材', 'PSD', '图标']
    },

    {
        url: 'https://pixabay.com/',
        name: 'pixabay',
        ico: img4,
        lable: ['中文', '图标']
    },

    {
        url: 'https://www.pexels.com/zh-cn/',
        name: 'pexels',
        ico: img6,
        lable: ['中文', '免费']
    },
    {
        url: 'https://unsplash.dogedoge.com/',
        name: 'unsplash',
        ico: img1,
        lable: ['中文', '图标', '素材']
    },
    {
        url: 'https://www.piqsels.com/',
        name: 'piqsels',
        ico: img3,
        lable: ['中文搜索', '图标']
    },
    {
        url: 'https://pixabay.com/',
        name: 'hippopx',
        ico: img5,
        lable: ['中文', '免费']
    },
    {
        url: 'https://www.cc0.cn/image/photock/',
        name: 'photock',
        ico: img7,
        lable: ['中文搜索', '免费']
    },
    {
        url: 'https://kaboompics.com/',
        name: 'kaboompics',
        ico: img8,
        lable: ['免费', '图标']
    },
    {
        url: 'https://free-images.com/',
        name: 'freeimages',
        ico: img9,
        lable: ['免费', '网速快']
    },
    {
        url: 'https://www.xdsucai.cn/uxui',
        name: 'XD素材中文网',
        ico: img10,
        lable: ['3D', '半免费', 'PSD']
    },
]
</script>
<style scoped lang='scss'>
.eshadow {
    border-radius: 5px;
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

    &:hover {
        transform: scale(1.1);
    }
}


.scale {
    transform: scale(0.9);
}
</style>